<template>
  <div class="disc">
    <!-- 碟片 -->
    <div class="disc_box" :class="{ active: $store.state.playing }">
      <!-- 外圈 -->
      <div class="disc_out">
        <img src="../../assets/playpage/disc-ip6.png" alt />
      </div>
      <!-- 内圈 -->
      <div class="disc_inner">
        <img
          :src="
            $store.state.imgUrl ||
              require('../../assets/playpage/disc_default.png')
          "
          alt
        />
      </div>
    </div>
    <!-- 针 -->
    <div class="point" :class="{ active: $store.state.playing }">
      <img src="../../assets/playpage/needle-ip6.png" alt />
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.disc {
  position: relative;
  .disc_box {
    position: absolute;
    left: calc(50vw - 20vh);
    top: 8vh;
    width: 40vh;
    height: 40vh;
    .disc_out {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 99;
      img {
        width: 100%;
      }
    }
    .disc_inner {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 90%;
      height: 90%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    animation-name: disc_rotate;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    &.active {
      animation-play-state: running;
    }
    @keyframes disc_rotate {
      from {
        transform: rotate(0);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }
  .point {
    position: absolute;
    left: 50vw;
    top: 0;
    width: 15vh;
    height: 15vh;
    transform-origin: top left;
    transform: rotate(-20deg);
    transition: all 1s;
    z-index: 999;
    &.active {
      transform: rotate(0);
    }
    img {
      width: 100%;
    }
  }
}
</style>
